8

一行一个标签对应多个输入组件,这个需求很常见但在官方例子没看到合适的,因为官方建议:

注意:一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child,当有多个被装饰过的 child 时,help required validateStatus 无法自动生成。

经过摸索,证实这样写是可行的,如下:

<FormItem
        {...formItemLayout}
        label={'主要股东'}
    >
        <Row gutter={30}>
            <Col span={8}>
                {this.props.form.getFieldDecorator('shareholderName2', {
                    rules: [{ required: true, message: '请输入股东名称' }],
                })(<Input placeholder={'请输入股东名称'} />)}
            </Col>
            <Col span={8}>
                <FormItem>
                    {this.props.form.getFieldDecorator('shareholderRate2', {
                        rules: [{
                            required: true,
                            // tslint:disable-next-line:max-line-length
                            pattern: /(^[1-9][0-9](\.\d)?$)|(^[1-9](\.\d)?$)|(^0\.\d$)/,
                            message: '请输入正确的持股比例',
                        }],
                    })(<Input addonAfter={'%'} placeholder={'请保留一位小数'}/>)}
                </FormItem>
            </Col>
        </Row>
    </FormItem>

方法就是用antd的栅格布局来控制排列,在后面的输入组件用FormItem再包一层,这样校验位置也正确,简直不要太爽。效果如图:
图片描述


ppsspp
169 声望3 粉丝